<script setup lang="ts">
import { ref, onMounted } from "vue"
import geateway_png from '../../../../public/img/矩形.png'

const visible = ref<boolean>(false)
const activeKey = ref("2")
const activeKeySon1 = ref(1)
const activeKeySon2 = ref(1)

const afterVisibleChange = (bool: boolean) => {
    console.log("visible", bool)
}

const showDrawer = () => {
    visible.value = true
}

const onClose = () => {
    visible.value = false
}

onMounted(() => {
    showDrawer()
})
</script>
<template>
    <a-drawer v-model:visible="visible" class="custom-class" style="color: red" width="80%" title="组件管理" placement="right" @after-visible-change="afterVisibleChange" :bodyStyle="{ padding: '0' }">
        <template #extra>
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onClose">提交</a-button>
        </template>
        <a-tabs v-model:activeKey="activeKey" type="editable-card" style="padding: 10px;">
            <a-tab-pane key="1" tab="基础设施">
                <a-tabs v-model:activeKey="activeKeySon1" tab-position="left" :style="{ height: '500px' }">
                    <a-tab-pane :key="1" :tab="`LDC`">Content of tab 1</a-tab-pane>
                </a-tabs>
            </a-tab-pane>
            <a-tab-pane key="2" tab="中间件">
              <a-tabs v-model:activeKey="activeKeySon2" tab-position="left" :style="{ height: '500px' }" type="editable-card">
                <a-tab-pane :key="1" :tab="`网关`">
                  <a-descriptions title="基础信息" size="default" style="margin-bottom: 30px; border-bottom: 1px dashed #eee;">
                    <template #extra>
                      <a-button type="primary">编辑</a-button>
                    </template>
                    <a-descriptions-item label="名称">网关</a-descriptions-item>
                    <a-descriptions-item label="类型">中间件</a-descriptions-item>
                    <a-descriptions-item label="图标">-</a-descriptions-item>
                    <a-descriptions-item label="图形">
                      <img :src="geateway_png" alt="">
                    </a-descriptions-item>
                    <a-descriptions-item label="边框颜色">#5F95FF</a-descriptions-item>
                    <a-descriptions-item label="底色">#EFF4FF</a-descriptions-item>
                  </a-descriptions>
                  <a-descriptions title="属性" size="default" style="margin-bottom: 30px; border-bottom: 1px dashed #eee;">
                    <template #extra>
                      <a-button type="primary">编辑</a-button>
                    </template>
                    <a-descriptions-item label="名称">文本</a-descriptions-item>
                    <a-descriptions-item label="类型">固定值</a-descriptions-item>
                  </a-descriptions>
                  <a-descriptions title="行为" size="default" style="margin-bottom: 30px; border-bottom: 1px dashed #eee;">
                    <template #extra>
                      <a-button type="primary">编辑</a-button>
                    </template>
                    <a-descriptions-item label="跳转实例" style="display: flex; align-items: center;">
                      <a-button type="dashed" size="default">编辑行为</a-button>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-tab-pane>
                <a-tab-pane :key="2" tab="数据库">数据库</a-tab-pane>
              </a-tabs>
            </a-tab-pane>
            <a-tab-pane key="3" tab="业务系统">业务系统</a-tab-pane>
            <a-tab-pane key="4" tab="服务">服务</a-tab-pane>
        </a-tabs>
    </a-drawer>
</template>
<style lang="css" scoped></style>
